<template>
  <div class="home">
    <!-- 粒子背景 -->
    <div id="particles-js" class="particles"></div>
    
    <!-- 主要内容 -->
    <div class="content">
      <div class="welcome-section">
        <div class="floating-hearts">
          <div class="heart" v-for="i in 20" :key="i" :style="getHeartStyle(i)"></div>
        </div>
        
        <div class="title-container" data-aos="fade-down" data-aos-duration="2000">
          <h1 class="main-title">
            <span class="title-word title-word-1">亲</span>
            <span class="title-word title-word-2">爱</span>
            <span class="title-word title-word-3">的</span>
            <span class="title-word title-word-4">{{ loveConfig?.girl?.name || '宝贝' }}</span>
          </h1>
        </div>
        
        <div class="subtitle" data-aos="fade-up" data-aos-delay="500" data-aos-duration="1500">
          <p class="typing-text" ref="typingText"></p>
        </div>
        
        <div class="love-counter" data-aos="zoom-in" data-aos-delay="1000" data-aos-duration="1000">
          <div class="counter-item">
            <div class="counter-number" ref="daysCounter">0</div>
            <div class="counter-label">天</div>
          </div>
          <div class="counter-item">
            <div class="counter-number" ref="hoursCounter">0</div>
            <div class="counter-label">小时</div>
          </div>
          <div class="counter-item">
            <div class="counter-number" ref="minutesCounter">0</div>
            <div class="counter-label">分钟</div>
          </div>
          <div class="counter-item">
            <div class="counter-number" ref="secondsCounter">0</div>
            <div class="counter-label">秒</div>
          </div>
        </div>
        
        <!-- 个人信息展示 -->
        <div class="personal-info" data-aos="fade-up" data-aos-delay="1200" data-aos-duration="1000" v-if="loveConfig">
          <div class="info-cards">
            <div class="info-card boy-card">
              <div class="avatar">👨</div>
              <h3>{{ loveConfig.boy?.name || '他' }}</h3>
              <p class="age">{{ loveConfig.boy?.age || 0 }}岁</p>
              <p class="zodiac">{{ loveConfig.boy?.zodiac || '未知' }}</p>
              <p class="birthday">{{ loveConfig.boy?.birthday ? loveUtils.formatDate(loveConfig.boy.birthday) : '未知' }}</p>
            </div>
            <div class="love-symbol">💕</div>
            <div class="info-card girl-card">
              <div class="avatar">👩</div>
              <h3>{{ loveConfig.girl?.name || '她' }}</h3>
              <p class="age">{{ loveConfig.girl?.age || 0 }}岁</p>
              <p class="zodiac">{{ loveConfig.girl?.zodiac || '未知' }}</p>
              <p class="birthday">{{ loveConfig.girl?.birthday ? loveUtils.formatDate(loveConfig.girl.birthday) : '未知' }}</p>
            </div>
          </div>
          
          <!-- 星座匹配度 -->
          <div class="zodiac-compatibility" data-aos="fade-up" data-aos-delay="1400" data-aos-duration="1000" v-if="loveConfig?.zodiac">
            <h3>星座匹配度</h3>
            <div class="compatibility-bar">
              <div class="compatibility-fill" :style="{ width: (loveConfig.zodiac.compatibility || 0) + '%' }"></div>
            </div>
            <p class="compatibility-text">{{ loveConfig.zodiac.compatibility || 0 }}%</p>
            <p class="compatibility-description">{{ loveConfig.zodiac.description || '星座匹配信息' }}</p>
          </div>
        </div>
        
        <div class="navigation" data-aos="fade-up" data-aos-delay="1500" data-aos-duration="1000">
          <router-link to="/love" class="nav-btn love-btn">
            <span>💕 我爱你</span>
          </router-link>
          <router-link to="/memory" class="nav-btn memory-btn">
            <span>📸 美好回忆</span>
          </router-link>
          <router-link to="/birthday" class="nav-btn birthday-btn">
            <span>🎂 生日信息</span>
          </router-link>
          <router-link to="/proposal" class="nav-btn proposal-btn">
            <span>💍 重要时刻</span>
          </router-link>
        </div>
      </div>
    </div>
    
    <!-- 音乐播放器 -->
    <div class="music-player" @click="toggleMusic">
      <div class="music-icon" :class="{ 'playing': isMusicPlaying }">
        🎵
      </div>
      <audio ref="audioPlayer" loop>
        <source src="/music/romantic-background.mp3" type="audio/mpeg">
      </audio>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import Typed from 'typed.js'
import { gsap } from 'gsap'
import { initParticles } from '../utils/particles.js'
import { loveConfig, loveUtils, updateConfig } from '../config/love-config.js'

export default {
  name: 'Home',
  setup() {
    const typingText = ref(null)
    const audioPlayer = ref(null)
    const isMusicPlaying = ref(false)
    const daysCounter = ref(null)
    const hoursCounter = ref(null)
    const minutesCounter = ref(null)
    const secondsCounter = ref(null)
    
    let typed = null
    let counterInterval = null
    
    // 更新配置数据
    updateConfig()
    
    const getHeartStyle = (index) => {
      return {
        left: Math.random() * 100 + '%',
        animationDelay: Math.random() * 3 + 's',
        animationDuration: (Math.random() * 3 + 2) + 's'
      }
    }
    
    const updateCounter = () => {
      if (!loveConfig?.love?.startDate) {
        return
      }
      
      const loveStartDate = new Date(loveConfig.love.startDate)
      const now = new Date()
      const diff = now - loveStartDate
      
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((diff % (1000 * 60)) / 1000)
      
      gsap.to(daysCounter.value, { textContent: days, duration: 1, snap: { textContent: 1 } })
      gsap.to(hoursCounter.value, { textContent: hours, duration: 1, snap: { textContent: 1 } })
      gsap.to(minutesCounter.value, { textContent: minutes, duration: 1, snap: { textContent: 1 } })
      gsap.to(secondsCounter.value, { textContent: seconds, duration: 1, snap: { textContent: 1 } })
    }
    
    const toggleMusic = () => {
      if (isMusicPlaying.value) {
        audioPlayer.value.pause()
        isMusicPlaying.value = false
      } else {
        audioPlayer.value.play()
        isMusicPlaying.value = true
      }
    }
    
    onMounted(() => {
      // 初始化打字效果
      typed = new Typed(typingText.value, {
        strings: [
          '我们已经相爱了这么久...',
          '每一天都因为有你而变得美好',
          '今天，我想对你说...',
          '我爱你 ❤️'
        ],
        typeSpeed: 50,
        backSpeed: 30,
        backDelay: 2000,
        loop: true,
        showCursor: true,
        cursorChar: '|'
      })
      
      // 启动计数器
      updateCounter()
      counterInterval = setInterval(updateCounter, 1000)
      
      // 初始化粒子效果
      initParticles('particles-js')
    })
    
    onUnmounted(() => {
      if (typed) typed.destroy()
      if (counterInterval) clearInterval(counterInterval)
    })
    
    return {
      typingText,
      audioPlayer,
      isMusicPlaying,
      daysCounter,
      hoursCounter,
      minutesCounter,
      secondsCounter,
      getHeartStyle,
      toggleMusic,
      loveConfig,
      loveUtils
    }
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.content {
  text-align: center;
  z-index: 10;
  position: relative;
}

.welcome-section {
  padding: 2rem;
}

/* 浮动爱心 */
.floating-hearts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.heart {
  position: absolute;
  font-size: 20px;
  color: rgba(255, 192, 203, 0.8);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

/* 标题动画 */
.title-container {
  margin-bottom: 2rem;
}

.main-title {
  font-size: 4rem;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5rem;
  font-family: 'LoveFont', cursive;
}

.title-word {
  animation: color-animation 4s linear infinite;
}

.title-word-1 {
  --color-1: #DF8453;
  --color-2: #3D8DAE;
  --color-3: #E4A9A8;
}

.title-word-2 {
  --color-1: #DBAD4A;
  --color-2: #ACCFCB;
  --color-3: #17494D;
}

.title-word-3 {
  --color-1: #ACCFCB;
  --color-2: #E4A9A8;
  --color-3: #ACCFCB;
}

.title-word-4 {
  --color-1: #3D8DAE;
  --color-2: #DF8453;
  --color-3: #E4A9A8;
}

.title-word-5 {
  --color-1: #E4A9A8;
  --color-2: #ACCFCB;
  --color-3: #DF8453;
}

@keyframes color-animation {
  0%    {color: var(--color-1)}
  32%   {color: var(--color-1)}
  33%   {color: var(--color-2)}
  65%   {color: var(--color-2)}
  66%   {color: var(--color-3)}
  99%   {color: var(--color-3)}
  100%  {color: var(--color-1)}
}

.subtitle {
  margin-bottom: 3rem;
}

.typing-text {
  font-size: 1.5rem;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  min-height: 2rem;
  font-family: 'LoveFont', cursive;
}

/* 计数器样式 */
.love-counter {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

.counter-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 80px;
}

.counter-number {
  font-size: 2rem;
  font-weight: bold;
  color: #ff6b9d;
  text-shadow: 0 0 10px rgba(255, 107, 157, 0.5);
}

.counter-label {
  font-size: 0.9rem;
  color: white;
  margin-top: 0.5rem;
}

/* 导航按钮 */
.navigation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.nav-btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  text-decoration: none;
  color: white;
  background: linear-gradient(45deg, #ff6b9d, #c44569);
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
  position: relative;
  overflow: hidden;
  font-family: 'LoveFont', cursive;
}

.nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.nav-btn:hover::before {
  left: 100%;
}

.nav-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4);
}

.love-btn {
  background: linear-gradient(45deg, #ff6b9d, #c44569);
}

.memory-btn {
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
}

.birthday-btn {
  background: linear-gradient(45deg, #ff9a9e, #fecfef);
  color: white;
}

.proposal-btn {
  background: linear-gradient(45deg, #a8edea, #fed6e3);
  color: #333;
}

/* 音乐播放器 */
.music-player {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  z-index: 100;
}

.music-player:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.3);
}

.music-icon {
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.music-icon.playing {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 个人信息样式 */
.personal-info {
  margin-bottom: 3rem;
}

.info-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.info-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 200px;
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.avatar {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.info-card h3 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-family: 'LoveFont', cursive;
}

.info-card .age {
  color: #ff6b9d;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.info-card .zodiac {
  color: #4ecdc4;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.info-card .birthday {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.love-symbol {
  font-size: 3rem;
  animation: heartBeat 1.5s ease-in-out infinite;
}

.zodiac-compatibility {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.zodiac-compatibility h3 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-family: 'LoveFont', cursive;
}

.compatibility-bar {
  width: 100%;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.compatibility-fill {
  height: 100%;
  background: linear-gradient(45deg, #ff6b9d, #4ecdc4);
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

.compatibility-text {
  color: #ff6b9d;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.compatibility-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-title {
    font-size: 2.5rem;
    letter-spacing: 0.3rem;
  }
  
  .typing-text {
    font-size: 1.2rem;
  }
  
  .love-counter {
    gap: 1rem;
  }
  
  .counter-item {
    min-width: 60px;
    padding: 0.8rem;
  }
  
  .counter-number {
    font-size: 1.5rem;
  }
  
  .nav-btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
  
  .info-cards {
    flex-direction: column;
    gap: 1rem;
  }
  
  .info-card {
    min-width: 150px;
    padding: 1.5rem;
  }
}
</style>
